/*
--------------------------------------
Taming the IE Beast
--------------------------------------
*/

/* Add display:inline to floated elements */
#logo a, #vcard img, #navigation li, #mainContent div.img,.about-content, #mainContent #social ul, #mainContent #social li,#social a img,#contact #personal,#contact #professional,#contact div.title img  {display:inline;}
 
/* Add zoom:1 to overflow:hidden */
.clear , #mainContent, #mainContent .content-center, .scroll {zoom:1;}
 
/* Add zoom:1 to pos:relative elements */
.copyright, .copyright-coda, div#fancy_inner, 
#container, #header, #mainContent #social li, 
#social a, .scroll  {zoom:1;}
 
* html ul#navigation a, *html #contact ul, *html .scroll {
  position: relative;
  zoom: 1;
}

/*
--------------------------------------
Manual fixes
--------------------------------------
*/

/*I'm using the sliding door techniques in the Navigation because if we want to add a larger buttom it slides out smoothly
For some reason IE6 doesn't display this good and we have to tweek it!*/
ul#navigation {margin-left:-35px}
div#nav ul#navigation li{width:60px;}
div#nav ul#navigation a {width:60px}
#nav {margin-left: 3px}

/*The portfolios images show a 1px solid and black border, we don't want that! ;)*/
#portfolio img { border:none}

/*Fixing the mainContent problems*/
.scroll {margin-left:60px}
.hideshow {margin-left:1px}
.coda {margin-left:-63px}

#mainContent {margin-top:-20px}

#mainContent .content-top {height:0;}
#mainContent #social {line-height:10px}
a strong {display: block;font-size: 15px;padding-top:5px}
#contact #professional {width:241px}


#mainContent #social ul {float:left; width:530px; margin:0; padding:0; margin-right:-60px}
#mainContent #social li {float: left;height: 47px;width: 216px;position: relative;left:-30px;padding:0}
#social a {	width: 225px;height: 47px;z-index: 2;}
#social a:hover {background:url(../images/a-hover.jpg) repeat-x;width:236px; zoom:1}

div.gallery ul {margin-top: -14px; margin-left:30px}
#mainContent {margin-top:-15px; #mainContent}

#mainContent .content-top {background:url(../images/content-top-trans.png) no-repeat;padding:5px 0 0px 20px; margin-bottom:-9px}
#social h2 {padding-bottom:26px; margin-top:10px; margin-bottom:-5px}


#navigation li { margin:0px 10px;padding:0px 0px; width:10px}
#navigation a { height:13px;  padding:8px 15px; width:10px}

#navigation .current {
	background:transparent url(../images/nav-r-trans.png) no-repeat scroll right -25px; height:24px;
}
#navigation .current a {
	background:transparent url(../images/nav-l-trans.png) no-repeat scroll left -25px; height:24px;
}

/*Internet Explorer 6 SUCKS! DIE IE6 DIE!*/